<?php
$key = 0;
?>
<div id="{!! $name !!}">
    @if(empty($options['value']))
        <div class="row">
            <div class="col-md-2" style="width:650px;margin-top: 10px;position: absolute;">
                <button type="button" class="close">&times;</button>
            </div>
            <div class="col-md-8" style="width:500px;">
                <div style="margin: 5px 5px;">
                {!! Form::select($name."[0][id]", $options['choices'], "", array_merge($options['attr'], ['class' => 'select2 include'])) !!}
                </div>
            </div>
            <div class="col-md-2">
                {!! Form::input($type, $name."[0][number]", 1, array_merge($options['attr'], ['style' => 'width:120px;margin-top: 5px;margin-left: -30px;'])) !!}
            </div>
        </div>
        <?php $key ++; ?>
    @else
        @foreach($options['value'] as $value)
            <div class="row">
                <div class="col-md-2" style="width:650px;margin-top: 10px;position: absolute;">
                    <button type="button" class="close">&times;</button>
                </div>
                <div class="col-md-8" style="width:500px;">
                    <div style="margin: 5px 5px;">
                    {!! Form::select($name."[{$key}][id]", $options['choices'], $value['id']??null, array_merge($options['attr'], ['class' => 'form-control select2 include'])) !!}
                    </div>
                </div>
                <div class="col-md-2">
                    {!! Form::input($type, $name."[{$key}][number]", $value['number']??2, array_merge($options['attr'], ['style' => 'width:120px;margin-top: 5px;margin-left: -30px;'])) !!}
                </div>
            </div>
            <?php $key ++; ?>
        @endforeach
    @endif

    {!!  Form::input('button', 'increase_text_add', "添加", ['class' => "btn btn-primary btn-sm", 'style' => "margin: 20px 5px;", 'id' => "increase_text_add"]) !!}
</div>

@push('scripts')
    <script>
        shop_id = $('#shops-select').val();
        $(".include.select2").select2({
            width: "100%",
            ajax: {
                dataType: 'json',
                delay: 250,
                url: function () {
                    return '{{ route('admin.search_goods') }}' + '?shop_id=' + shop_id;;
                },
                processResults: function (data) {
                    return {
                        results: $.map(data, function(row, key) {
                            return {
                                id: key,
                                text: row
                            };
                        })
                    };
                }
            }
        });
        var options = "<option value=''></option>";
        var key = {{ $key }};
        @foreach($options['choices'] as $key => $value)
            options += "<option value='{{ $key }}'>{{ $value }}</option>";
        @endforeach
        $('#increase_text_add').on('click', function () {
            shop_id = $('#shops-select').val();
            node = "<div class=\"row\">\n" +
                "                <div class=\"col-md-2\"  style=\"width:650px;margin-top: 10px;position: absolute;\">\n" +
                "                    <button type=\"button\" class=\"close\">×</button>\n" +
                "                </div>\n" +
                "                <div class=\"col-md-8\" style='width:500px;'>\n" +
                "\n" +
                "<div style=\"margin: 5px 5px;\">\n" +
                "                    <select class=\"form-control select2 include\" required=\"required\" style=\"margin: 5px 5px\" name=\"content["+ key +"][id]\">" +
                options +
                "</select>\n" +
                "</div>\n" +
                "                </div>\n" +
                "                <div class=\"col-md-2\">\n" +
                "                    <input class=\"form-control\"  required=\"required\" style=\"width:120px;margin-top: 5px;margin-left: -30px;\" name=\"content["+ key +"][number]\" type=\"include\" value=\"1\">\n" +
                "                </div>\n" +
                "            </div>";
            node = $(node).attr('name', "{!! $name !!}" + "[]");
            key ++;
            $(this).before(node);
            $(".include.select2").select2({
                width: "100%",
                ajax: {
                    dataType: 'json',
                    delay: 250,
                    url: function () {
                        return '{{ route('admin.search_goods') }}' + '?shop_id=' + shop_id;;
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function(row, key) {
                                return {
                                    id: key,
                                    text: row
                                };
                            })
                        };
                    }
                }
            });
        });

        $(document).on('click', ".close", function () {
            $(this).parent().parent().remove();
        });

        $('#content').attr('style', 'background: rgba(190,190,190,0.50); padding: 10px;  width: 750px; display:inline-flex')
    </script>
@endpush
@push('stylesheets')
    <style>
    </style>
@endpush
